<template>
  <view class="weather">
    <view class="icon">
      <image :src="'/static/icons/' + weatherNow.icon + '.svg'" mode="aspectFit"></image>
    </view>
    <view class="text temperature">
      {{ weatherNow.temp }}°C
    </view>
    <view class="text condition">
      {{ weatherNow.text }}
    </view>
    <view class="text wind">
      {{ weatherNow.windDir }} {{ weatherNow.windScale }}级
    </view>
    <view class="details">
      <view class="text feels-like">
        体感温度： {{ weatherNow.feelsLike }}°C
      </view>
      <view class="text humidity">
        湿度： {{ weatherNow.humidity }}%
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { CONFIG } from '../../utils/config';
import { userStore } from '../../store/userStore';

let store = userStore();
onLoad(() => {
  getWeather();
});
let weatherNow = ref({});

async function getWeather() {
  let res = await uni.$get(CONFIG.hefeng_now, {
    key: CONFIG.hefeng_key,
    location: CONFIG.hefeng_location
  });
  if (res.code == 200) {
    weatherNow.value = res.now;
    console.log(res.now);
  }
}
</script>

<style scoped>
.weather {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background-color: #f0f5f9;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 300px;
  margin: 20px auto;
}

.icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 120px;
  height: 120px;
  margin-bottom: 15px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.icon image {
  width: 80px;
  height: 80px;
  object-fit: contain;
}

.text {
  font-size: 16px;
  color: #333;
  margin-bottom: 8px;
  text-align: center;
}

.temperature {
  color: #555;
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 5px;
}

.condition {
  font-size: 20px;
  font-weight: bold;
  color: #3498db;
}

.wind {
  font-size: 14px;
  color: #777;
}

.details {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feels-like,
.humidity {
  font-size: 14px;
  color: #777;
  margin-bottom: 5px;
}

/* 根据天气情况动态改变颜色 */
.icon image[src*='clear-day'] {
  filter: sepia(0.8) hue-rotate(30deg) brightness(1.2); /* 金黄色的太阳图标 */
}

.icon image[src*='clear-night'] {
  filter: sepia(0.2) hue-rotate(20deg) brightness(0.8) contrast(1.2); /* 浅黄色的月亮图标 */
}

.icon image[src*='partly-cloudy-day'] {
  filter: hue-rotate(280deg) saturate(1.2); /* 白天多云，偏冷色调且饱和度稍高 */
}

.icon image[src*='partly-cloudy-night'] {
  filter: hue-rotate(260deg) saturate(1.2) brightness(0.9); /* 夜晚多云，偏冷色调，适当调整亮度 */
}

.icon image[src*='rain'] {
  filter: hue-rotate(180deg) saturate(1.5) brightness(0.8); /* 下雨，偏冷且暗一些，饱和度较高 */
}

.icon image[src*='snow'] {
  filter: hue-rotate(0deg) saturate(1.3) brightness(0.9); /* 下雪，白色调为主，适当调整饱和度和亮度 */
}

.icon image[src*='fog'] {
  filter: hue-rotate(220deg) saturate(0.8) brightness(0.7) contrast(0.8); /* 雾天，偏灰色调，整体较暗 */
}

.icon image[src*='thunderstorm'] {
  filter: hue-rotate(240deg) saturate(1.5) brightness(0.9) contrast(1.2); /* 雷暴，偏紫色调，高饱和度，适当亮度和对比度 */
}

.icon image[src*='haze'] {
  filter: hue-rotate(200deg) saturate(0.9) brightness(0.8) contrast(1); /* 霾，偏灰色调，稍暗 */
}

.icon image[src*='sleet'] {
  filter: hue-rotate(160deg) saturate(1.2) brightness(0.8); /* 雨夹雪，偏蓝灰色调，饱和度适中，较暗 */
}

/* 你可以根据实际图标文件名继续添加更多天气情况的颜色调整 */
</style>